<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="菜品销售明细表"
      row-key="id"
      :columns="columns"
      :request-api="getPageReport"
      :init-param="initData"
      :show-summary="true"
      :summary-method="getSummaries"
      :data-callback="dataCallback"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="onExcel"> 导出报表 </el-button>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="saleDetail">
import { ref, reactive } from "vue";
import { Inventory } from "@/api/interface";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { getPageReport } from "@/api/modules/reporting";
import { formatDate } from "@/utils/date-formatter";
import { getFoodCategoryList } from "@/api/modules/goods";

const proTable = ref<ProTableInstance>();
// 新建默认数据
const initData = reactive({
  reportId: 101
  // dataTimeRange: ["2023-11-14", "2023-12-14"]
});

const columns: ColumnProps<Inventory.ResCustomList>[] = [
  {
    type: "index",
    label: "序号",
    width: 80,
    search: {
      el: "date-picker",
      label: "日期",
      key: "dataTimeRange",
      defaultValue: [formatDate(-1, "start", "yyyy-MM-dd"), formatDate(0, "end", "yyyy-MM-dd")],
      props: {
        type: "datetimerange",
        format: "YYYY-MM-DD",
        valueFormat: "YYYY-MM-DD"
      }
    }
  },
  {
    sortable: true,
    prop: "orderNo",
    label: "订单号",
    align: "left",
    minWidth: 180,
    search: { el: "input" }
  },
  { sortable: true, prop: "storeName", label: "门店名称", minWidth: 240, align: "left" },
  {
    sortable: true,
    prop: "foodCategoryId",
    label: "菜品分类",
    minWidth: 120,
    align: "left",
    enum: () => getFoodCategoryList({ pageNum: 1, pageSize: 9999, listType: 1 }),
    search: { el: "tree-select" },
    fieldNames: { label: "name", value: "id" }
  },
  { sortable: true, prop: "foodName", label: "菜品名称", minWidth: 240, align: "left", search: { el: "input" } },
  { sortable: true, prop: "specName", label: "菜品规格", minWidth: 120, align: "left" },
  { sortable: true, prop: "price", label: "原价", minWidth: 120, align: "left" },
  { sortable: true, prop: "realPrice", label: "实价", minWidth: 120, align: "left" },
  { sortable: true, prop: "quantity", label: "数量", minWidth: 120, align: "left" },
  { sortable: true, prop: "amount", label: "原金额", minWidth: 120, align: "left" },
  { sortable: true, prop: "discount", label: "折扣值", minWidth: 120 },
  { sortable: true, prop: "discountAmount", label: "优惠金额", minWidth: 120, align: "left" },
  { sortable: true, prop: "realAmount", label: "实收金额", minWidth: 120, align: "left" },
  { sortable: true, prop: "taskAmount", label: "做法加价", minWidth: 120, align: "left" },
  { sortable: true, prop: "feedAmount", label: "加料加价", minWidth: 120, align: "left" },
  { sortable: true, prop: "departName", label: "出品部门", minWidth: 120, align: "left" },
  { sortable: true, prop: "ordertypeName", label: "订单类型", minWidth: 120, align: "left" },
  { sortable: true, prop: "orderDate", label: "订单日期", minWidth: 180, align: "left" },
  { prop: "deskName", label: "桌号", align: "left" }
];

const summary = ref([]);
const dataCallback = (data: any) => {
  summary.value = data.summary;
  return {
    list: data.list,
    total: data.total,
    pageNum: data.pageNum,
    pageSize: data.pageSize
  };
};

const onExcel = () => {
  getPageReport({ export: 1, reportId: 101, ...proTable.value?.searchParam }).then(res => {
    window.location.href = res.data;
  });
};

const getSummaries = param => {
  const { columns } = param;
  const sums: string[] = [];
  columns.forEach((column, index) => {
    sums[index] = summary.value[index];
    return sums;
  });
  return sums;
};
</script>
